<template>
    <div class="map-plugin">
        <ul>
            <li @click="canvasLayer">十万个marker加载</li>
            <li @click="initGeojson">加载行政区域</li>
        </ul>
    </div>
</template>

<script setup>
import util from '../utils'
import { useMapStore } from '../store'
import { ref, reactive, onMounted, computed } from 'vue'
import { getGeojsonApi } from '../api/api'
import { message } from 'ant-design-vue'
const mapStore = useMapStore()
const map = ref(null)
const props = defineProps({
    folder: {
        default: '100000'
    },
    fileName: {
        default: '100000'
    }
})
onMounted(() => {
    map.value = mapStore.map
})
const canvasLayer = () => {
    message.info('开始渲染十万标点')
    const cliLayer = util.map.createCanvasIconLayer(map.value)
    for (let i = 0; i < 100000; i++) {
        const latlng = util.map.getRandomLatLng(map.value)
        const marker = util.map.createMakerByLatlngNotAddToMap(latlng, {
            // icon: util.map.createIcon({
            //   iconUrl: util.getImgUrl('./../assets/images/tree.png'),
            //   iconSize: [20, 20],
            //   iconAnchor: [20, 20],
            // }),
        })
        cliLayer.addMarker(marker)
    }
    message.info('十万标点渲染完成')
}

const folder = ref('100000')
const fileName = ref('100000')
const folderValue = computed(() => {
    return props.folder ? props.folder : folder.value
})
const fileNameValue = computed(() => {
    return props.folder ? props.folder : fileName.value
})
const geojsonLayers = reactive([])
const geojsonMarkers = reactive([])
const initGeojson = () => {
    message.info('初始化GeoJSON')
    geojsonLayers.forEach(item => item.remove())
    geojsonMarkers.forEach(item => item.remove())
    folder.value = '100000'
    fileName.value = '100000'
    getGeojson()
    map.value.setView(map.value.getCenter(), 4)
}
const getGeojson = async () => {
    let { code, data, msg } = await getGeojsonApi({
        folder: folderValue.value,
        fileName: fileNameValue.value,
    })
    if (code == '404') {
        message.error(`GeoJSON加载失败!${JSON.stringify(msg)}`)
        return
    }
    geojsonLayers.map(layer => layer.remove())
    geojsonMarkers.map(marker => marker.remove())
    let { layer, markers } = util.map.createLayerByGeojson(map.value, JSON.parse(data.trim()), {
        onEachFeature,
    })
    geojsonLayers.push(layer)
    geojsonMarkers.push(...markers)
    message.success('GeoJSON加载完成')
}
const onEachFeature = (feature, layer) => {
    layer.on('click', e => {
        let { acroutes, adcode, center, name } = e.target.feature.properties
        message.info(`${name}GeoJSON开始加载`)
        fileName.value = adcode
        folder.value = acroutes.join('/')
        getGeojson()
        if (acroutes.length === 1) {
            map.value.setView(center.reverse(), 7)
        } else if (acroutes.length === 2) {
            map.value.setView(center.reverse(), 9)
        }
    })
}
</script>

<style scoped lang="less">
.map-plugin {
    position: absolute;
    right: 15px;
    top: 120px;
    z-index: 999;
    height: 36px;
    box-shadow: 0 0 50px 2px rgba(0, 0, 0, 0.35);
    background-color: #fff;

    ul {
        display: flex;
        padding: 0;
        margin: 0;
        list-style: none;

        li {
            min-width: 80px;
            padding: 0 15px;
            height: 36px;
            font-size: 13px;
            line-height: 36px;
            cursor: pointer;
        }

        li.active {
            background-color: rgb(102, 156, 255);
            color: #fff;
        }

        li:hover {
            background-color: rgb(212, 224, 246);
        }
    }
}
</style>
